<script setup lang="ts">
import { MenuService } from '@/services/api/idt/menu.service'
import { useRequest } from 'vue-request'
import MenuItem from './MenuItem.vue'
const emits = defineEmits(['item-click'])

const { data, refresh } = useRequest(MenuService.getMenuTreeApi)

const handleOpen = (key: string, keyPath: string) => {
  console.log(key, keyPath)
  emits('item-click', key, keyPath)
}
const handleClose = (key: string, keyPath: string) => {
  console.log(key, keyPath)
  emits('item-click', key, keyPath)
}
const handleSelect = (key: string, keyPath: string) => {
  console.log(key, keyPath)
  emits('item-click', key, keyPath)
}

defineExpose({ refresh })
</script>

<template>
  <el-scrollbar height="100%">
    <el-menu
      style="border: 0"
      @open="handleOpen"
      @close="handleClose"
      @select="handleSelect"
      :collapse-transition="false"
      :unique-opened="true"
    >
      <MenuItem :menus="data || []" />
    </el-menu>
  </el-scrollbar>
</template>
